<!doctype html>
<html>
    <head>
        <meta charset="UTF-8" />

        <title>Red List of Things</title>
        <style type="text/css" media="screen">@import "/stylesheets/jqtouch.css";</style>
        <style type="text/css" media="screen">@import "/stylesheets/red.css";</style>
        <script src="/javascripts/jquery-1.4.2.min.js" type="text/javascript" charset="utf-8"></script>
        <script src="/javascripts/jqtouch.js" type="application/x-javascript" charset="utf-8"></script>
        <script type="text/javascript" charset="utf-8">
            var jQT = new $.jQTouch({
                cacheGetRequests: false,
                icon: 'red_icon.png',
                addGlossToIcon: true,
                startupScreen: 'red_startup.png',
                statusBar: 'transparant',
                preloadImages: [
                    '/images/back_button.png',
                    '/images/back_button_clicked.png',
                    '/images/button_clicked.png',
                    '/images/grayButton.png',
                    '/images/whiteButton.png',
                    '/images/loading.gif'
                    ]
            });
            // Some sample Javascript functions:
            $(function(){
                /* Show a swipe event on swipe test
                $('#swipeme').swipe(function(evt, data) {
                    $(this).html('You swiped <strong>' + data.direction + '/' + data.deltaX +':' + data.deltaY + '</strong>!');
                });
                $('a[target="_blank"]').click(function() {
                    if (confirm('This link opens in a new window.')) {
                        return true;
                    } else {
                        return false;
                    }
                });
                // Page animation callback events
                $('#pageevents').
                    bind('pageAnimationStart', function(e, info){
                        $(this).find('.info').append('Started animating ' + info.direction + '&hellip; ');
                    }).
                    bind('pageAnimationEnd', function(e, info){
                        $(this).find('.info').append(' finished animating ' + info.direction + '.<br /><br />');
                    });
                // Page animations end with AJAX callback event, example 1 (load remote HTML only first time)
                $('#callback').bind('pageAnimationEnd', function(e, info){
                    if (!$(this).data('loaded')) {                      // Make sure the data hasn't already been loaded (we'll set 'loaded' to true a couple lines further down)
                        $(this).append($('<div>Loading</div>').         // Append a placeholder in case the remote HTML takes its sweet time making it back
                            load('ajax.html .info', function() {        // Overwrite the "Loading" placeholder text with the remote HTML
                                $(this).parent().data('loaded', true);  // Set the 'loaded' var to true so we know not to re-load the HTML next time the #callback div animation ends
                            }));
                    }
                });
                // Orientation callback event
                $('#jqt').bind('turn', function(e, data){
                    $('#orient').html('Orientation: ' + data.orientation);
                });*/
            });
        </script>
 
    </head>
    <body id="jqt">
    <div id="main" class="current">
      <div class="toolbar">
        <h1>Red List of Things</h1>
      </div>
      <ul class="rounded">
        <li class="menu_item"><a href="#">Blog</a></li>
        <li class="menu_item" ><a href="/movies" target="list">Movies</a></li>
        <li class="menu_item"><a href="/songs" target="list">Songs</a></li>
        <li class="menu_item"><a href="/games" target="list">Games</a></li>
        <li class="menu_item"><a href="/books" target="list">Books</a></li>
        <li class="menu_item"><a href="/gadgets" target="list">Gadgets</a></li>
        <li class="menu_item"><a href="/comics" target="list">Comics</a></li>
        <li class="menu_item"><a href="/contacts" target="list">Contacts</a></li>
        <li class="subscribe"><a href="#about">About</a></li>
      </ul>
      <!--img src="" alt="logo" height="100px"/-->
      <ul class="rounded">
        <li class="menu_item"><a href="#">Blog</a></li>
        <li class="menu_item" ><a href="/movies/wish_list/0" target="list">Movies</a></li>
        <li class="menu_item"><a href="/songs" target="list">Songs</a></li>
        <li class="menu_item"><a href="/games/show_consoles/0" target="list">Games</a></li>
        <li class="menu_item"><a href="/books" target="list">Books</a></li>
        <li class="menu_item"><a href="/gadgets" target="list">Gadgets</a></li>
        <li class="menu_item"><a href="/comics" target="list">Comics</a></li>
        <li class="menu_item"><a href="/contacts" target="list">Contacts</a></li>
        <li class="subscribe"><a href="#about">About</a></li>
      </ul>
    </div>

   <div id="about">
      <div class="toolbar">
        <h1>About Red List</h1>
      </div>
      <ul class="rounded">
        <li class="menu_item"><a href="#">Blog</a></li>
      </ul>
    </div>

    </body>
</html>
